<template>
  <el-card>
    <pure-table
      adaptive
      :adaptiveConfig="adaptiveConfig"
      :data="tableData"
      :columns="columns"
      :row-class-name="tableRowClassName"
    >
      <template #aqiLevel="{ row }">
        <span> {{ convertLevelToChinese(row.feedback.fbAqiLevel) }}</span>
      </template>
      <template #operation="{ row }">
        <el-button link type="primary" size="small" @click="handleClick(row)">
          去检测
        </el-button>
      </template>
    </pure-table>
  </el-card>
</template>

<script setup lang="ts">
import { getAqiMeasuredTaskListByInsId } from "@/api/aqiMeasuredResult";
import { getGridProvinceById } from "@/api/gridProvince";
import { getGridCityById } from "@/api/gridCity";
import { getAqiFeedbackById } from "@/api/feedback";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { teen } from "gradient-string";
import { useResultInfoStoreHook } from "@/store/modules/resultInfo";

defineOptions({
  name: "Measuring"
});

const router = useRouter();
const columns: TableColumnList = [
  {
    label: "AQI指数等级",
    prop: "feedback.fbAqiLevel",
    slot: "aqiLevel",
    sortable: true
  },
  {
    label: "所在省",
    prop: "provinceName"
  },
  {
    label: "所在市",
    prop: "cityName"
  },
  {
    label: "地址",
    prop: "aqiMeasuredResult.aqimrAddress"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];
const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  if (rowIndex === 1 || rowIndex === 5) {
    return "pure-warning-row";
  } else if (rowIndex === 3 || rowIndex === 7) {
    return "pure-success-row";
  }
  return "";
};

const tableData = ref([]);
const getMeasuredResultTask = async () => {
  const insId = 1;
  const { data } = await getAqiMeasuredTaskListByInsId(insId);
  console.log(data, "taskList");
  const updatedList = await Promise.all(
    data.map(async item => ({
      ...item,
      provinceName: await getProvinceById(item.aqiMeasuredResult.provinceId),
      cityName: await getCityById(item.aqiMeasuredResult.cityId),
      feedback: await getAqiFeedback(item.aqiMeasuredResult.fbId)
    }))
  );
  tableData.value = updatedList;
  console.log(tableData.value, "tableData");
};

/**根据省份id获取省份名称 */
const getProvinceById = async (provinceId: number) => {
  try {
    const { data } = await getGridProvinceById(provinceId);
    console.log(data);
    return data.provinceName;
  } catch (e) {
    console.log(e);
  }
};

/**根据城市id获取城市名称 */
const getCityById = async (cityId: number) => {
  try {
    const { data } = await getGridCityById(cityId);
    console.log(data);
    return data.cityName;
  } catch (e) {
    console.log(e);
  }
};

const getAqiFeedback = async (fbId: number) => {
  const { data } = await getAqiFeedbackById(fbId);
  console.log(data);
  return data;
};

onMounted(() => {
  console.log("mounted");
  getMeasuredResultTask();
});

//选中
const handleClick = (row: any) => {
  console.log(row, "click");
  useResultInfoStoreHook().SET_AQIFEEDBACK(row.feedback);
  useResultInfoStoreHook().SET_AQIMEASUREDRESULT(row.aqiMeasuredResult);
  useResultInfoStoreHook().SET_PROVINCENAME(row.provinceName);
  useResultInfoStoreHook().SET_CITYNAME(row.cityName);
  useResultInfoStoreHook().SET_INSPECTOR(row.inspector);
  useResultInfoStoreHook().SET_MONITOR(row.monitor);
  useResultInfoStoreHook().SET_AQIVALUE(row.aqiValue);
  router.push("/measuredInfo");
};

//表格大小自适应
const adaptiveConfig: AdaptiveConfig = {
  /** 表格距离页面底部的偏移量，默认值为 `96` */
  offsetBottom: 85,
  /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
  fixHeader: true
};

// 定义一个辅助函数，将数字转换为中文
const convertLevelToChinese = (level: number): string => {
  switch (level) {
    case 1:
      return "一";
    case 2:
      return "二";
    case 3:
      return "三";
    case 4:
      return "四";
    case 5:
      return "五";
    case 6:
      return "六";
    default:
      return "";
  }
};
</script>

<style>
/* 此处样式会在全局都生效，上面 tableRowClassName 函数返回的值也就是类名必须在全局中唯一，避免样式突出 */
.pure-warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.pure-success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-button .el-icon-thumb {
  color: black; /* 修改图标颜色为黑色 */
}
</style>
